﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="util" uri="functions"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 下拉框 -->
<link rel="stylesheet" href="/static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../../system/index/top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="/static/ace/css/datepicker.css" />
<!-- 分页控件 -->
<script type="text/javascript" src="/static/ace/js/jquery.js"></script>
<link type="text/css" href="/static/css/page/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="/static/css/page/bootstrap-pagination.min.css" rel="stylesheet" />
</head>
<body class="no-skin">

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
						<div v-cloak id="div_all_data" >
						<!-- 检索  -->
						<form  method="post" name="Form" id="Form">
						<input type="hidden" name="sortColumn" v-model="pageInfo.sortColumn">
						<input type="hidden" name="sortDirection" v-model="pageInfo.sortDirection">
						<table style="margin-top:5px;">
							<tr>
								<td>
									<div class="nav-search">
										<span class="input-icon">
											<input type="text" placeholder="这里输入关键词" class="nav-search-input" id="nav-search-input" autocomplete="off" name="keywords" value="${queryParam.keywords }" />
											<i class="ace-icon fa fa-search nav-search-icon"></i>
										</span>
									</div>
								</td>
								<td style="padding-left:2px;"><input class="span10 date-picker" name="startDate" id="startDate"  value="${util:getDateTime(queryParam.startDate)}" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:88px;" placeholder="开始日期" title="开始日期"/></td>
								<td style="padding-left:2px;"><input class="span10 date-picker" name="endDate" id="endDate"  value="${util:getDateTime(queryParam.endDate)}" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:88px;" placeholder="结束日期" title="结束日期"/></td>
								<td style="vertical-align:top;padding-left:2px;">
								 	<select class="chosen-select form-control" name="name"  data-placeholder="请选择" style="vertical-align:top;width: 120px;">
									<option value=""></option>
									<option value="">全部</option>
									<option value="">1</option>
									<option value="">2</option>
								  	</select>
								</td>
								<c:if test="${util:listAble() }">
								<td style="vertical-align:top;padding-left:2px"><a class="btn btn-light btn-xs" onclick="toSearch();"  title="检索"><i id="nav-search-icon" class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a></td>
								</c:if>
								<c:if test="${buttonRights.toExcel == 1 }"><td style="vertical-align:top;padding-left:2px;"><a class="btn btn-light btn-xs" onclick="toExcel();" title="导出到EXCEL"><i id="nav-search-icon" class="ace-icon fa fa-download bigger-110 nav-search-icon blue"></i></a></td></c:if>
							</tr>
						</table>
						<!-- 检索  -->
					
						<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">	
							<thead>
								<tr>
									<th class="center" style="width:35px;">
									<label class="pos-rel"><input type="checkbox" class="ace" id="zcheckbox" /><span class="lbl"></span></label>
									</th>
									<th class="center" style="width:50px;">序号</th>
									<th class="center" data-column-sortable="true" data-column-name="roleId">角色</th>
									<th class="center" data-column-sortable="true" data-column-name="menuId">菜单id</th>
									<th class="center" data-column-sortable="true" data-column-name="addDate">添加时间</th>
									<th class="center">操作</th>
								</tr>
							</thead>
													
							<tbody>
							<!-- 开始循环 -->	
									<c:if test="${util:listAble() }">
										<tr v-for="(item,index) in data">
											<td class='center'>
												<label class="pos-rel"><input type='checkbox' name='ids' :value="item.id" class="ace" /><span class="lbl"></span></label>
											</td>
											<td class='center' style="width: 30px;">{{index + 1}}</td>
											<td class='center'>{{item.roleId}}</td>
											
											<td class='center'>{{item.menuId}}</td>
											
											<td class='center'>{{item.addDate | datetime}}</td>
											<td class="center">
												<c:if test="${!util:editAble() && !util:deleteAble() }">
												<span class="label label-large label-grey arrowed-in-right arrowed-in"><i class="ace-icon fa fa-lock" title="无权限"></i></span>
												</c:if>
												<div class="hidden-sm hidden-xs btn-group">
													<c:if test="${util:editAble() }">
													<a class="btn btn-xs btn-success" title="编辑" @click="edit(item.id);">
														<i class="ace-icon fa fa-pencil-square-o bigger-120" title="编辑"></i>
													</a>
													</c:if>
													<c:if test="${util:deleteAble() }">
													<a class="btn btn-xs btn-danger" @click="del(item.id);">
														<i class="ace-icon fa fa-trash-o bigger-120" title="删除"></i>
													</a>
													</c:if>
												</div>
											</td>
										</tr>
									
									</c:if>
									<c:if test="${buttonRights.QUERY == 0 }">
										<tr>
											<td colspan="100" class="center">您无权查看</td>
										</tr>
									</c:if>
							
							</tbody>
						</table>
						<div class="page-header position-relative">
						<table style="width:100%;">
							<tr>
								<td style="vertical-align:top;">
									<c:if test="${util:addAble() }">
									<a class="btn btn-sm btn-success" @click="ADD();">新增</a>
									</c:if>
									<c:if test="${util:deleteAble() }">
									<a class="btn btn-sm btn-danger" @click="deleteAll" title="批量删除" ><i class='ace-icon fa fa-trash-o bigger-120'></i></a>
									</c:if>
								</td>
								<!-- 分页的底部 -->
                                <td style="vertical-align:top;">
                                    <nav style="float:right">
                                        <ul id="ul_page" class="pagination">
                                        </ul>
                                    </nav>
                                 </td>
							</tr>
						</table>
						</div>
						</form>
					    </div>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->

		<!-- 返回顶部 -->
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<!-- 页面底部js¨ -->
	<%@ include file="../../system/index/foot.jsp"%>
	<script type="text/javascript" src="/static/js/jquery-form.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/js/page/bootstrap-pagination.min.js"></script>
	<!-- 删除时确认窗口 -->
	<script src="/static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="/static/ace/js/ace/ace.js"></script>
	<!-- 下拉框 -->
	<script src="/static/ace/js/chosen.jquery.js"></script>
	<!-- 日期框 -->
	<script src="/static/ace/js/date-time/bootstrap-datepicker.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="/static/js/jquery.tips.js"></script>
	<!--vue-->
	<script type="text/javascript" src="/static/js/myjs/list-common-2.0.js"></script>
	<script type="text/javascript" src="/static/js/vue/vue.min.js"></script>
	<script type="text/javascript" src="/static/js/vue/vue-common-filter.js"></script>
	<script type="text/javascript" src="/static/js/jquery-table-sorter.js"></script>
	<script type="text/javascript">
		$(function() {
			toSearch();
			$("table").tableSorter(function(columnName, sort){
				vueData.pageInfo.sortColumn = columnName;
				vueData.pageInfo.sortDirection = sort;
				refresh();
			})
		});
		//检索
		function toSearch() {
			var queryParam = $('#Form').parseForm();
			$.extend(vueData.pageInfo, queryParam);
			firstPage();
		}
		//刷新
		function refresh() {
			pageSearch(vueData.pageInfo.current, vueData.pageInfo.size, true);
		}
		//跳转到第一页
		function firstPage() {
			pageSearch(1, vueData.pageInfo.size, true);
		}
		//数据
		var vueData = {};
		//分页数据
		vueData.pageInfo = {};
		vueData.pageInfo.total = 0;
		vueData.pageInfo.size = 10;
		vueData.pageInfo.current = 1;
		vueData.pageInfo.sortColumn = "addDate";
		vueData.pageInfo.sortDirection = "DESC";
		vueData.data = [];
        
        var pageVm = new Vue({
			el : '#div_all_data',
			data : vueData,
			methods : {
				edit : function(id) {
					//修改
					var diag = new top.Dialog();
					diag.Drag = true;
					diag.Title = "编辑";
					diag.URL = '/admin/rolemenu/edit?id=' + id;
					diag.Width = 1000;
					diag.Height = 750;
					diag.CancelEvent = function() { //关闭事件
						refresh();
						diag.close();
					};
					diag.show();
				},
				del : function(id) {
					//删除
					bootbox.confirm("确定要删除吗?", function(result) {
						if (result) {

							var postData = {};
							postData.id = id;
							$.post("/admin/rolemenu/delete", postData, function(result) {

								if (result.code == 200) {
									bootbox.alert("成功", function() {
										refresh();
									})
								}
							});

						}
					});
				},
				ADD : function() {
					//添加
					var typeId = $("#hidden_type_id").val();
					var diag = new top.Dialog();
					diag.Drag = true;
					diag.Title = "新增";
					diag.URL = '/admin/rolemenu/add?typeId=' + typeId;
					diag.Width = 1000;
					diag.Height = 750;
					diag.CancelEvent = function() { //关闭事件
						refresh();
						diag.close();
					};
					diag.show();
				},
				deleteAll : function() {
					//批量删除
					bootbox.confirm("你确认要删除选中的数据吗？", function(result) {
						if (!result) {
							return;
						}
						var ids = [];
						$("[name='ids']:checked").each(function(i, item) {
							ids.push($(item).val());
						});
						var postData = {};
						postData.ids = ids;
						$.post("/admin/rolemenu/deleteAll", postData, function(result) {
							if (result.code == 200) {
								refresh();
							} else {
								bootbox.alert(data.mes);
							}
						});
					});
				}

			}
		})

		//分页查询
		function pageSearch(pageIndex, pageSize, resetPage) {
			vueData.pageInfo.current = pageIndex;
			vueData.pageInfo.size = pageSize;
			$.post("/admin/rolemenu/list", vueData.pageInfo, function(result) {
				if (result.code == 200) {
					vueData.data = [];
					var resultData = result.data.data;
					vueData.pageInfo.total = result.data.total;
					//是否重置查询插件
					if (resetPage) {
						resetPagePlugin();
					}
					for (var i = 0; i < resultData.length; i++) {
						vueData.data.push(resultData[i]);
					}
					//没有数据,自动查询上一页
					if (resultData.length == 0) {
						if (vueData.pageInfo.current > 1) {
							pageSearch(vueData.pageInfo.current - 1, vueData.pageInfo.size, true);
						}
					}
				}

			})

		}

		//重置分页插件
		function resetPagePlugin() {
			BootstrapPagination($("#ul_page"), {
				total : vueData.pageInfo.total,
				pageIndex : vueData.pageInfo.current - 1,
				pageGroupSize : 5,
				pageSize : vueData.pageInfo.size,
				pageChanged : function(pageIndex, pageSize) {
					pageSearch(pageIndex + 1, pageSize);
				},
			});
		}

		//导出excel
		function toExcel() {
			var preAction = $("#Form").attr("action");
			$("#Form").attr("action", "/admin/rolemenu/excel");
			$("#Form").submit();
			$("#Form").attr("action", preAction);
		}
	</script>

	
</body>
</html>